<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        margin: 0 auto;
        width: 800px;
        border-collapse: collapse;
        color: skyblue;
      }
      th {
        padding: 10px;
        background: #cfe5ff;

        font-size: 20px;
        font-weight: 400;
      }
      td,
      th {
        border: 1px solid #b8daff;
      }
      td {
        padding: 10px;
        color: #666;
        text-align: center;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>名次</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>销售额</th>
          <th>业绩状态</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> -->
      </tbody>
    </table>
    <script>
      // 销售人员数据
      let sales = [
        { name: '小明', age: 18, gender: '男', money: 30, status: 0 },
        { name: '小红', age: 26, gender: '女', money: 99, status: 3 },
        { name: '小刚', age: 19, gender: '男', money: 88, status: 2 },
        { name: '小丽', age: 20, gender: '女', money: 67, status: 1 },
        { name: '晓强', age: 23, gender: '女', money: 77, status: 1 },
        { name: '小张', age: 25, gender: '女', money: 80, status: 2 },
      ]
      // 字段 money 是销售金额
      // 字段 status 是销售状态 0:代表 未及格 1: 代表 及格 2: 代表 良好 3: 代表 优秀

      // 要求1: 数据要排序，从大到小显示
      for (let i = 0; i < sales.length; i++) {
        sales.sort(function (a, b) {
          return b.money - a.money
        })
      }
      console.log(sales)
      // 要求2: 销售金额 显示 需要带单位w
      const res = sales.map(function (item) {
        return item.money + 'w'
      })
      console.log(res)
      // 要求3: 销售状态 需要 显示出  未及格， 及格， 良好， 优秀
      for (let i = 0; i < sales.length; i++) {
        if (sales[i].status == 0) {
          sales[i].status = '未及格'
        } else if (sales[i].status == 1) {
          sales[i].status = '及格'
        } else if (sales[i].status == 2) {
          sales[i].status = '良好'
        } else if (sales[i].status == 3) {
          sales[i].status = '优秀'
        }
      }
      console.log(sales)
      // 要求4: 渲染页面的过程 要封装成函数
      const table = document.querySelector('table')
      // console.log(table)
      function fn() {
        sales.map(function (item,index) {
         
         
          const tr = document.createElement('tr')
          // console.log(item.name)
          tr.innerHTML = ` 
          <tr>
          <td>${index +1}</td>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.money}</td>
          <td>${item.status}</td>         
        </tr>
          `
          table.appendChild(tr)
        })
      }
      fn()
    </script>
  </body>
</html>
